<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery-1.11.3.min.js"></script>
    <style>
        .circle {
            width:200px;
            height: 200px;
            position: absolute;
            border-radius: 50%;
            background: #00AACC;
        }
        .pie-left,     .pie-right {
            width: 200px;
            height: 200px;
            position: absolute;
            left:0px;
            right: 0px;
        }
        .left, .right {
            display: block;
            width: 200px;
            height: 200px;
            background: #0cc;
            border-radius: 50%;
            position: absolute;
            left:0px;
            top:0px;
            /*旋转30度*/
            /*transform: rotate(30deg);*/
        }
        .pie-right, .right {
            clip:rect(0,auto,auto,100px);
        }
        .pie-left, .left {
            /*截图工具 top rigt,bottom, left  auto默认值*/
            clip:rect(0,100px,auto,0);
        }
        .mask {
            width:150px;
            height: 150px;
            line-height: 150px;
            border-radius: 50%;
            position: absolute;
            left: 25px;
            top:25px;
            background: #fff;
            text-align: center;
            font-size: 16px;
        }
        .circle-wraps {
            width: 80%;
            margin:auto;
        }
        .circle-wrap {
            display: inline-block;
            margin-left: 200px;
        }
    </style>
</head>
<body>
    <div class="circle-wraps">
        <div class="circle-wrap">
        <div class="circle">
            <div class="pie-left">
                <div class="left"></div>
            </div>
            <!-- <div class="pie-right">
                <div class="right"></div>
            </div>
            <div class="mask"><span></span>%</div> -->
        </div>
    </div>

    </div>
    
    <script>
        $(function() {
            var leftContent  = document.querySelector(".left");
            var rightContent  = document.querySelector(".right");
            var textCircle   = document.querySelector(".mask");
            
            //先是leftContent旋转角度从0增加到180度，
            //然后是rightContent旋转角度从0增加到180度
            var angle = 0;
            
            var timerId = setInterval(function(){
                angle += 30;
                console.log(angle);
                if(angle > 360){
                    clearInterval(timerId);
                }else{
                    if(angle > 180){
                        rightContent.setAttribute('style', 'transform: rotate('+(angle-180)+'deg)');
                    }else{
                        leftContent.setAttribute('style', 'transform: rotate('+angle+'deg)');
                    }
                    setPercent(angle);
                    
                }
            },500);
            
            function setPercent(angle){
              textCircle.innerHTML = parseInt(angle*100/360) +'%';
              textCircle.ing
            }

        });
    </script>
</body>
</html>